<template>
	<view>
		<view style="height: 18upx;"></view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label required">联系人姓名</view>
				<view class="form-content">
					<input v-model="formData.name" placeholder="请输入" class="input-css" placeholder-class="plac-css" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label required">联系人手机</view>
				<view class="form-content">
					<input type="number" v-model="formData.phone" placeholder="请输入" class="input-css"
						placeholder-class="plac-css" maxlength="11" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label required">所在地区</view>
				<view class="form-content" @click="isProvincesPicker = true">
					<input
						:value="formData.provinceId ? `${formData.provinceName}-${formData.cityName}-${formData.areaName}` : ''"
						disabled placeholder="选择省/市/区" class="input-css" placeholder-class="plac-css" />
					<uni-icons type="right" size="29upx" color="#B8ACA3"></uni-icons>
				</view>
			</view>
			<view class="form-item" style="flex-direction: column;align-items: flex-start;">
				<view class="form-label required">详细地址</view>
				<view class="form-content" style="width: 100%;">
					<textarea v-model="formData.address" class="textarea-css" placeholder-class="plac-css"
						placeholder="请输入" maxlength="200"/>
				</view>
			</view>
		</view>
		<ProvincesPicker v-if="isProvincesPicker"
			:value="formData.provinceId ? [formData.provinceId, formData.cityId, formData.areaId] : []"
			@close="isProvincesPicker = false" @change="onProvincesChange"></ProvincesPicker>
		<FloatView>
			<FloatButton @click="onSubmit">提交</FloatButton>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: '',
				isProvincesPicker: false,
				formData: {
					name: "",
					phone: "",
					provinceName: "",
					provinceId: "",
					cityName: "",
					cityId: "",
					areaName: "",
					areaId: "",
					address: ""
				}
			}
		},
		onLoad(options) {
			this.detailId = options.detailId || ''
			if (this.detailId) {
				uni.setNavigationBarTitle({
					title: '修改联系地址'
				})
				this.getAddressDetail()
			}
		},
		onShow() {},
		methods: {
			async onSubmit() {
				const showToast = uni.$util.showToast
				const regExp = uni.$util.regex
				if (!this.formData.name) return showToast('请输入联系人姓名')
				if (!this.formData.phone) return showToast('请输入联系人手机')
				if (!regExp.phone.test(this.formData.phone)) return showToast('请输入正确的手机号码')
				if (!this.formData.provinceId) return showToast('请选择所在地区')
				if (!this.formData.address) return showToast('请输入详细地址')
				const request = this.detailId ? uni.$api.getAddressUpdate : uni.$api.getAddressAdd
				uni.$util.showLoading()
				const res = await request(this.formData).finally(uni.finally)
				uni.$util.openerEvent(this)
				await uni.$util.showSuccess()
				uni.navigateBack()
			},
			async getAddressDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getAddressDetail(this.detailId).finally(uni.finally)
				this.formData = res.data
			},
			onProvincesChange(event) {
				this.formData.provinceName = event.province.name
				this.formData.provinceId = event.province.id
				this.formData.cityName = event.city.name
				this.formData.cityId = event.city.id
				this.formData.areaName = event.region.name
				this.formData.areaId = event.region.id
				this.isProvincesPicker = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.form-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 40upx;
		padding-bottom: 12upx;

		.form-item {
			width: 100%;
			@extend .row-between;
			padding: 22upx 0;

			.form-label {
				font-size: 29rpx;
				font-weight: 400;
				color: #B8ACA3;
			}

			.required {
				&::after {
					content: "*";
					color: #FF442F;
					margin-left: 12upx;
				}
			}

			.form-content {
				width: calc(100% - 215upx);
				@extend .row-between;

				.textarea-css {
					width: 100%;
					height: 170rpx;
					background: #FAF6F3;
					border-radius: 14rpx;
					margin-top: 20upx;
					padding: 30upx;
					font-size: 25rpx;
				}

				.input-css {
					flex: 1;
					font-size: 29rpx;
					font-weight: 400;
				}

				.plac-css {
					font-size: 29rpx;
					font-weight: 400;
					color: #B8ACA3;
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #E9E9F4;
		}
	}
</style>